<template>
    <div class="con">
        <h1>微信扫码登录</h1>
        <div class="IMG" v-loading="loading">
            <img :src="qrImg" alt="">
            <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQrUrl"></i>
        </div>
        <p>
            <!-- <svg aria-hidden="true" class="icon-wx">
                <use xlink:href="#icon-weixin"></use>
            </svg> -->
            请使用手机微信扫码登入
        </p>
    </div>
</template>

<script>
// 引入socket.io
import socketIo from "socket.io-client"
//引入qrcode
import qrcode from "qrcode"
// 引入api
import * as api from "@/api/users" 
//引入成功和失败扫码遮罩图片
import invalidImg from "@/assets/image/invalidQr.png"
import scanSuccessImg from "@/assets/image/scancode.png"
import storage from "@/utils/storage"
// import http from "@/utils/request"
export default {
    props:{
        storageUserInfo:{
            required:true,
        }
    },
    data(){
        return{
             //二维码图片
            qrImg:"",
            //是否显示遮罩
            showQrMask:false,
             //遮罩背景样式
             maskBg: { backgroundImage: `url(${scanSuccessImg})` }, //扫码成功
             loading:true
        }
    },
    created(){
        // 建立socket连接
        let io=socketIo('wss://chst.vip')
        //监听连接的事件
        io.on("connectSuccess",async({sid})=>{
            //将sid存到本地
            storage.set("qf-sid", sid)
            // 生成二维码封装调用
            this.getQrUrl(sid)
        })
        //无效二维码 
        io.on("invalidCode",data=>{
            // console.log(data)
             //展示遮罩
            this.showQrMask = true;
            //显示无效的二维码遮罩样式
            this.maskBg.backgroundImage = `url(${invalidImg})` 
        })
        //扫码成功
        io.on("scancodeSuccess",async({state,wechatCode,msg})=>{
            //扫码成功显示遮罩
            this.showQrMask=true;
            this.maskBg.backgroundImage=`url(${scanSuccessImg})`
            if(state){
                //如果扫码成功 调用微信登入的接口
                let res=await api.wechatLoginApi(wechatCode);
                //将内容存到本地
                this.storageUserInfo(res.data)
                // console.log(res);
                //跳转页面
                this.$router.push("/")
            }else{
                console.error(msg)
            }
        })
    },
    methods:{
        async getQrUrl(sid){
            this.loading=true
            // 请求获取二维码地址
            let res=await api.getQrCodeApi(sid);
            let {scanCodeUrl:qrcodeUrl}=res.data;
            // 通过qrcode插件,生成二维码
            qrcode.toDataURL(qrcodeUrl,(err,img)=>{
                if(err){
                    throw err
                }
                this.qrImg=img;

                // 关掉遮罩
                this.showQrMask=false;
                this.loading=false;
            })
        },
        //跟新二维码地址
        updateQrUrl(){
            //获取本地存储的sid
            let sid =storage.get("qf-sid")
            // console.log(sid);
            this.getQrUrl(sid)
        }
    }
}

</script>

<style scoped lang="less">
.con{
    text-align:center;
}
.con .IMG{
    width:250px; 
    height:250px;
    margin:0 auto;
    display: inline-block;
    position: relative;
    img {
        position: absolute;
        left: 0;
    }
    .mask {
            width: 100%;
            height: 100%;
            opacity: 0.8;
            background-color: #fff;
            position: absolute;
            left: 0;
            // background-image: url("../../assets/img/scancode.png");
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
}
</style>
